<template>
  <!-- 顶部导航栏 -->
  <TopNav />
  <el-container class="home-container">
    <!-- 主要内容区 -->
    <el-main class="main-content">
      <div class="content-wrapper">
        <div class="hero-section">
          <el-image
            class="character-image"
            :src="characterImage"
            fit="cover"
          ></el-image>
          <div class="hero-text">
            <div class="flex h-80 items-center justify-center">
              <SparklesText
                text="向内探索，向上生长"
                :colors="{ first: '#9E7AFF', second: '#FE8BBB' }"
                :sparkles-count="10"
                class="my-8"
              />
            </div>

            <RadiantText
              class="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"
              :duration="5"
            >
              <span class="text-3xl font-bold" style="white-space: nowrap"
                >✨ VlCHI. ——薇启伴你觉醒潜能</span
              >
            </RadiantText>

            <span class="text-3xl font-bold"></span>
          </div>
        </div>

        <div class="features-section">
          <CardContainer @click="navigateTo('ai-learning')">
            <CardBody
              class="group/card relative size-auto rounded-xl border border-black/[0.1] bg-gray-50 p-4 sm:w-[20rem] md:w-[22rem] lg:w-[24rem] dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl"
            >
              <!-- 卡片图片区域 -->
              <CardItem :translate-z="100" class="mt-3 w-full">
                <img
                  src="@/assets/ask.png"
                  class="h-40 w-full rounded-xl object-cover group-hover/card:shadow-xl"
                  alt="智伴优学"
                />
              </CardItem>

              <!-- 卡片标题区域 -->
              <CardItem
                :translate-z="60"
                class="mt-3 text-lg font-bold text-neutral-600 dark:text-white"
              >
                <h3 class="feature-title">智伴优学</h3>
              </CardItem>

              <!-- 卡片描述区域 -->
              <CardItem
                as="p"
                translate-z="50"
                class="mt-2 max-w-sm text-sm text-neutral-500 dark:text-neutral-300"
              >
                <p class="feature-description">
                  AI学习伙伴，个性化学习计划，针对性辅导
                </p>
              </CardItem>

              <!-- 底部操作区域（可选） -->
              <!-- <div class="mt-6 flex items-center justify-between">
                <CardItem
                  :translate-z="20"
                  as="a"
                  href="#"
                  class="rounded-xl px-3 py-1.5 text-xs font-normal dark:text-white"
                >
                  了解更多 →
                </CardItem>
              </div> -->
            </CardBody>
          </CardContainer>

          <CardContainer @click="navigateTo('ai-learning')">
            <CardBody
              class="group/card relative size-auto rounded-xl border border-black/[0.1] bg-gray-50 p-4 sm:w-[20rem] md:w-[22rem] lg:w-[24rem] dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl"
            >
              <!-- 卡片图片区域 -->
              <CardItem :translate-z="100" class="mt-3 w-full">
                <img
                  src="@/assets/note.png"
                  class="h-40 w-full rounded-xl object-cover group-hover/card:shadow-xl"
                  alt="睿记精解"
                />
              </CardItem>

              <!-- 卡片标题区域 -->
              <CardItem
                :translate-z="60"
                class="mt-3 text-lg font-bold text-neutral-600 dark:text-white"
              >
                <h3 class="feature-title">睿记精解</h3>
              </CardItem>

              <!-- 卡片描述区域 -->
              <CardItem
                as="p"
                translate-z="50"
                class="mt-2 max-w-sm text-sm text-neutral-500 dark:text-neutral-300"
              >
                <p class="feature-description">
                  智能记忆训练，帮助您高效记忆知识点
                </p>
              </CardItem>
            </CardBody>
          </CardContainer>

          <CardContainer @click="navigateTo('ai-learning')">
            <CardBody
              class="group/card relative size-auto rounded-xl border border-black/[0.1] bg-gray-50 p-4 sm:w-[20rem] md:w-[22rem] lg:w-[24rem] dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl"
            >
              <!-- 卡片图片区域 -->
              <CardItem :translate-z="100" class="mt-3 w-full">
                <img
                  src="@/assets/comp.png"
                  class="h-40 w-full rounded-xl object-cover group-hover/card:shadow-xl"
                  alt="心聆秘语"
                />
              </CardItem>

              <!-- 卡片标题区域 -->
              <CardItem
                :translate-z="60"
                class="mt-3 text-lg font-bold text-neutral-600 dark:text-white"
              >
                <h3 class="feature-title">心聆秘语</h3>
              </CardItem>

              <!-- 卡片描述区域 -->
              <CardItem
                as="p"
                translate-z="50"
                class="mt-2 max-w-sm text-sm text-neutral-500 dark:text-neutral-300"
              >
                <p class="feature-description">
                  心理健康守护，情感陪伴，压力释放
                </p>
              </CardItem>
            </CardBody>
          </CardContainer>
        </div>
      </div>
      <BotmNav />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import TopNav from "@/components/TopNavBar.vue";
import SparklesText from "./SparklesText.vue";
import RadiantText from "./RadiantText.vue";
import { CardContainer, CardBody, CardItem } from "@/components/ui/card-3d";
import BotmNav from "./BotmNav.vue";
import "@/assets/main.css";
const router = useRouter();
const characterImage = ref(
  "https://tc.z.wiki/autoupload/f/fxia76aczleV1dsL5mjQMl6Axg_3LykWgpTWzVmhpcSyl5f0KlZfm6UsKj-HyTuv/20250705/LI4P/1393X716/im.png"
);
const navigateTo = (path) => {
  router.push(`/${path}`);
};

const startExperience = () => {
  ElMessage.success("开始体验功能即将开放！");
};

const logout = () => {
  localStorage.removeItem("token");
  router.push("/login");
};
</script>

<style scoped>
.home-container {
  height: 100vh;
  background-color: #f5f7fa;
  overflow: hidden;
}

.el-main {
  /* 实际滚动容器，应用滚动条隐藏样式 */
  height: 100%; /* 撑满父容器高度 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.el-main::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.content-wrapper {
  max-width: 1200px;
  padding: 0 10px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.left-section {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-right: 30px;
}

.nav-menu {
  border: none;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

.right-section {
  display: flex;
  align-items: center;
}

.user-avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-name {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}

.main-content {
  padding: 10px;
}

.hero-section {
  display: flex;
  margin-bottom: 30px;
}

.character-image {
  width: 400px;
  height: 500px;
  border-radius: 10px;
}

.hero-text {
  flex: 1;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 30px;
}

.features-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.feature-card {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.feature-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
</style>
